<template>
  <div class="mc-container">
<!--    <h3 class="mc-container-header">产品详情</h3>-->
    <!-- 全局加载状态：替换 el-spinner 为 el-loading （避免Spinner组件依赖问题） -->
    <div v-if="!isDataLoaded" class="page-loading">
      <p class="loading-text">加载产品数据中...</p>
    </div>
    <div v-else>
      <el-card shadow="never" class="border-none mt-6" style="margin-top: -20px">
        <div class="product-card">
          <div>
            <product-images :image-lists="productImageLists"></product-images>
            <div class="bullet-points">
              <h3>Bullet points</h3>
              <div class="bullet-ul">
                <ul>
                  <li v-for="(item, index) in productDto.bulletPoints" :key="index">{{ item }}</li>
                </ul>
              </div>
            </div>
          </div>
          <div>
            <el-tooltip effect="dark" content="该listing有图文(图文介绍)" placement="top">
              <el-tag color="#e62d06" v-if="productDto.aplus">A+</el-tag>
            </el-tooltip>
            <el-tooltip effect="dark" content="该Listing有Amazon's Choice标识" placement="top">
              <el-tag color="#1e2334" v-if="productDto.ac">AC</el-tag>
            </el-tooltip>
            <h3 class="mb-5">{{ productDto.title }}</h3>
            <el-row>
              <el-col :span="12">
                <div class="label-container" style="line-height: 36px">
                  <label class="label-left basis-0">ASIN:</label>
                  <div>
                    <span>{{ productDto.code }}</span>
                    <a class="ml-1 align-middle" :href="productDto.url" target="_blank"><iconpark-icon name="amazon"></iconpark-icon
                    ></a>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
<!--                <el-button type="primary"  @click="collectedProductsListing">收藏这个商品</el-button>-->
<!--                <pre-submit-listing-->
<!--                  :productId="productDto.bsId"-->
<!--                  :productDto="productDto"-->
<!--                ></pre-submit-listing>-->
              </el-col>
            </el-row>
            <div class="label-container">
              <label class="label-left basis-0">类目:</label>
              <span v-text="productDto.categoryPath"></span>
            </div>
            <el-row>
              <el-col :span="12">
                <div class="label-container">
                  <label class="label-left basis-0">品牌:</label>
                  <span v-text="productDto.brand"></span>
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">评分数/评论数:</label>
                  <span>
                    <span v-text="productDto.totalCommentNum"></span>/
                    <span v-text="productDto.totalRatingNum"></span>
                  </span>
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">好评率:</label>
                  <span v-text="productDto.positiveRatio + '%'"></span>
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">差评率:</label>
                  <span v-text="productDto.negativeRatio + '%'"></span>
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">评分/星级:</label>
                  <span v-text="productDto.score"></span>
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">BuyBox价格:</label>
                  <fixed-amount :value="productDto.price" :symbol="productDto.symbol" />
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">Buybox卖家:</label>
                  <span v-text="productDto.sellerType"></span>
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">卖家数量:</label>
                  <span v-text="productDto.sellerNum"></span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="label-container">
                  <label class="label-left basis-0">变体个数:</label>
                  <span v-text="productDto.skuNum"></span>
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">上架时间:</label>
                  <date-format :date="productDto.availableDate" format="yyyy-MM-dd" />
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">页面库存:</label>
                  <product-inventory :value="productDto.inventoryNum" />
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">产品尺寸:</label>
                  <span v-text="productDto.dimensions"></span>
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">包裹尺寸:</label>
                  <span v-text="productDto.packageSize"></span>
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">产品重量:</label>
                  <span v-text="productDto.weight"></span>
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">包裹重量:</label>
                  <span v-text="productDto.packageWeight"></span>
                </div>
                <div class="label-container">
                  <label class="label-left basis-0">产品类型:</label>
                  <span v-text="productDto.productType"></span>
                </div>
              </el-col>
            </el-row>
            <div class="label-container">
              <label class="label-left basis-0">公司名称:</label>
              <span v-text="productDto.bsName"></span>
            </div>
            <div class="label-container">
              <label class="label-left basis-0">公司地址:</label>
              <bs-address :value="productDto.bsAddress" />
            </div>
          </div>
        </div>
      </el-card>
      <el-card shadow="never" class="border-none mt-6" v-emptyDataMask="state.chartSalesDataMask">
        <div class="chart-top">
          <div class="info-data">
            <div class="d-item">
              <h3>总销售数量</h3>
              <p><em v-text="chartSalesTop.total ?? '-'"></em></p>
            </div>
          </div>
          <div class="data-ctrl"
            ><span v-text="chartSalesTop.start"></span><span>至</span
            ><span v-text="chartSalesTop.end"></span
          ></div>
        </div>
        <e-chart-sales :data="chartSalesData" />
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import ProductImages from '@/plugins/pair/product-images.vue'
import { collectedProductsListingApi, getProduct, getProductSalesKeep } from '@/api/common'
import XEUtils from 'xe-utils'
import { useRoute } from 'vue-router'
import FixedAmount from '@/plugins/pair/fixed-amount.vue'
import ProductInventory from '@/plugins/pair/product-inventory.vue'
import BsAddress from '@/plugins/pair/bs-address.vue'
import EChartSales from '@/plugins/pair/e-chart-sales.vue'
import PreSubmitListing from '@/plugins/pair/pre-submit-listing.vue'
import DateFormat from '@/plugins/pair/date-format.vue'
import { ElMessage } from 'element-plus'
const route = useRoute()
const productDto = ref<any>({
  imageUrls: [],
  keywords: [],
  productInfo: {},
  bulletPoints: [],
  attributes: {}
})
const state = reactive({
  chartSalesDataMask: false
})

const props = defineProps({
  productId: {
    type: String,
    required: true
  },
  // 标记是否在抽屉弹窗中显示
  isDrawerMode: {
    type: Boolean,
    default: true
  }
})
// 定义关闭事件
const emit = defineEmits(['close'])
const isDataLoaded = ref(false)
const chartSalesData = ref({})
const chartSalesTop = ref({
  total: '-',
  start: '2024-01',
  end: '2024-12'
})
const productImageLists = computed(() => {
  return productDto.value.imageUrls?.map((item: string) => {
    return {
      url: item,
      title: ''
    }
  })
})
const reqProduct = () => {
  getProduct(props.productId).then((res) => {
    productDto.value = res.data
    isDataLoaded.value = true
  })
}

const collectedProductsListing = () => {
  collectedProductsListingApi([productDto.value.bsId]).then((res) => {
    ElMessage.success('收藏成功')
    // // 收藏成功后更新isCollect状态
    productDto.isCollect = 1
  })
}
const reqProductSalesKeep = () => {
  if (props.productId) {
    getProductSalesKeep(props.productId).then((res) => {
      const productSalesKeep = res.data.pairList
      if (productSalesKeep) {
        chartSalesTop.value = {
          total: res.data.total,
          start: productSalesKeep[0].timePoint,
          end: productSalesKeep[productSalesKeep.length - 1].timePoint
        }
        chartSalesData.value = {
          xData: productSalesKeep.map((item: any) => item.timePoint),
          yData: productSalesKeep.map((item: any) => item.value)
        }
        state.chartSalesDataMask = true
      }
    })
  }
}
// 关闭弹窗方法
const handleClose = () => {
  emit('close')
}
onMounted(() => {
  reqProduct()
  reqProductSalesKeep()
})
</script>
<style scoped lang="scss">
.page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  gap: 16px;
  color: #666;
}

.loading-text {
  font-size: 16px;
}
.product-card {
  margin-top: 20px;
  display: flex;
}
.label-container {
  margin-bottom: 20px;
  align-items: normal;
}
.bullet-points {
  h3 {
    color: #030303;
    font-weight: 600;
    margin: 25px 0 10px 0;
    font-size: 16px;
  }
  .bullet-ul {
    width: 518px;
    height: 170px;
    overflow-x: auto;
    li {
      font-size: 12px;
      margin-bottom: 3px;
    }
    li::before {
      content: '●';
      font-size: 12px;
      margin-right: 5px;
    }
  }
}
</style>
